<template>
  <div class="total">
    <el-card shadow="always"
             :body-style="{ padding: '20px' }">
      <div class="card-header">
        <span>全校数据展示</span>
      </div>
      <!-- card body -->
      <div class="datebody">
        <span class="demonstration">年月</span>
        <div class="bodypicker">
          <el-date-picker @change="changedate"
                          v-model="datevalue"
                          type="date"
                          placeholder="选择日期">
          </el-date-picker>
        </div>
        <el-switch v-model="isInSchool"
                   active-color="#ff4949"
                   inactive-color="#13ce66"
                   active-text="不在校"
                   inactive-text="在校"
                   @change="switchChange">
        </el-switch>

      </div>

    </el-card>
  </div>
  <el-card shadow="always"
           :body-style="{ padding: '20px' }">
    <!-- card body -->
    <div class="dangenum">
      <div class="numbox">
        <div class="icon"><img src=""
               alt=""></div>
        <div class="info">
          <p class="top"
             style="color:#4f80ff">{{safepeople}}</p>
          <p class="bottom">当天<span v-if="isInSchool">不</span>在校人数</p>
        </div>
      </div>
      <div class="numbox">
        <div class="icon"
             style="background-position:-56rem;"><img src=""
               alt=""></div>
        <div class="info">
          <p class="top"
             style="color:#f4ea2a">{{level1people}}</p>
          <p class="bottom">0-3天<span v-if="isInSchool">不</span>在校</p>
        </div>
      </div>
      <div class="numbox">
        <div class="icon"
             style="background-position:-120.5rem;"><img src=""
               alt=""></div>
        <div class="info">
          <p class="top"
             style="color:#ff822e">{{level2people}}</p>
          <p class="bottom">3-5天<span v-if="isInSchool">不</span>在校</p>
        </div>
      </div>
      <div class="numbox">
        <div class="icon"
             style="background-position:-178.9rem;"><img src=""
               alt=""></div>
        <div class="info">
          <p class="top"
             style="color:#d81e06">{{level3people}}</p>
          <p class="bottom">5-7天<span v-if="isInSchool">不</span>在校</p>
        </div>
      </div>
    </div>
  </el-card>
  <el-card shadow="always"
           :body-style="{ padding: '20px' }">
    <div class="contain_box">
      <div class="left">
        <el-empty v-if="!IsSuccess"
                  description="暂无数据"></el-empty>
        <Linechart v-if="IsSuccess"
                   :date='datevalue'
                   :isInSchool="isInSchool"></Linechart>
      </div>
      <div class="right">
        <div class="PieHighChart">
          <el-empty v-if="!IsSuccess"
                    description="暂无数据"></el-empty>
          <PieHighchart v-if="IsSuccess"
                        :date='datevalue'
                        :isInSchool="isInSchool"></PieHighchart>
        </div>

        <div class="saveButtonbox">
          <div class="saveButton">

          </div>
        </div>
      </div>

    </div>
  </el-card>

  <el-card shadow="always"
           :body-style="{ padding: '20px' }">
    <div class="barchartbox">
      <el-empty v-if="!IsSuccess"
                description="暂无数据"></el-empty>
      <Barchart v-if="IsSuccess"
                :date='datevalue'
                :isInSchool="isInSchool"></Barchart>
    </div>
    <div class="saveButtonBox">
      <div class="saveButton">

      </div>
    </div>

  </el-card>

</template>

<script>
//导入首页图表
import Linechart from '@/components/charts/Linechart.vue'
import Barchart from '@//components/charts/Barchart.vue'
// import Piechart from '@//components/Piechart.vue'
import PieHighchart from '@/components/charts/PieHighchart.vue'
import ChartSaveButton from '@/components/charts/ChartSaveButton.vue'
import {
  getCountofStudentNotInSchoolByDay
} from '@/api/dashboard/absentHistoryController'


import { calculateDay } from "@/utils/dateutils"




export default {
  name: "StdInSch",
  data () {
    return {

      total: 0,
      day: 0,
      // 安全人数
      safepeople: 0,
      // 风险等级1
      level1people: 0,
      // 风险等级2
      level2people: 0,
      // 风险等级3
      level3people: 0,
      // 当前日期  （暂时设置为固定日期，等后端数据填好，再修改为当前日期）
      datevalue: new Date(1626883200000),
      // 是否在校
      isInSchool: false,
    }
  },
  components: {
    "Linechart": Linechart,
    "Barchart": Barchart,
    // "Piechart": Piechart,
    "PieHighchart": PieHighchart,
    "ChartSaveButton": ChartSaveButton
  },
  created () {
    this.day = calculateDay(this.datevalue)

    this.isInSchool = this.$store.state.isInSchool

  },
  mounted () {
    this.day = calculateDay(this.datevalue)

    this.getDatas()
  },
  methods: {
    // 切换 在校||不在校  数据展示   ，通过refresh页面刷新
    switchChange () {
      this.$store.state.isshowcharts = false
      this.$store.state.isInSchool = this.isInSchool
      this.$router.push({
        name: "RefreshStudent"
      })
    },

    // 获取 首页数据，现在是同步获取，后面需要改成异步获取，或者批次获取
    async getDatas () {
      this.day = calculateDay(this.datevalue)
      // 获取安全人数
      let {
        msg: safepeople
      } = await getCountofStudentNotInSchoolByDay(this.day, this.day, this.isInSchool)
      if (safepeople == null) {
        this.safepeople = 0
        this.$store.state.isshowcharts = true

      }
      else {
        this.safepeople = safepeople.count
        this.$store.state.isshowcharts = true
      }
      this.$store.commit("setIsShowCharts", true)

      // 获取风险等级1的人数
      let {
        msg: level1people
      } = await getCountofStudentNotInSchoolByDay(this.day, this.day + 3, this.isInSchool)
      if (level1people == null) {
        this.level1people = 0
      } else {
        this.level1people = level1people.count
      }
      // 获取风险等级2的人数
      let {
        msg: level2people
      } = await getCountofStudentNotInSchoolByDay(this.day + 3, this.day + 5, this.isInSchool)
      if (level2people == null) {
        this.level2people = 0
      } else {
        this.level2people = level2people.count
      }
      // 获取风险等级3的人数
      let {
        msg: level3people
      } = await getCountofStudentNotInSchoolByDay(this.day + 5, this.day + 7, this.isInSchool)
      if (level3people == null) {
        this.level3people = 0

      } else {
        this.level3people = level3people.count
      }
    },
    // 修改日期
    changedate (d) {
      let nowDate = new Date();
      if ((nowDate.getTime() - this.datevalue.getTime()) < 0) return
      this.datevalue = d
      this.day = calculateDay(this.datevalue);
      this.getDatas()
    }
  },
  computed: {
    // 是否能正常展示数据
    IsSuccess () {
      return this.$store.state.isshowcharts
    }
  },
  watch: {
    // 监听是否能正常展示数据
    IsSuccess () {
    }
  }

}
</script>

<style lang='less' scoped>
:deep(.contain_box) {
  height: 26rem;
  display: flex;
  justify-content: space-between;
  /* overflow: hidden; */
  overflow: auto;
  flex-wrap: wrap;

  .left {
    width: 50%;
    height: 100%;
  }

  .right {
    width: 50%;
    height: 100%;
    position: relative;

    .PieHighChart {
      height: 80%;
    }

    .saveButtonbox {
      display: relative;
      width: 100%;
      height: 20%;

      .saveButton {
        position: absolute;
        right: 3.65rem;
        bottom: 1.25rem;
      }
    }
  }
}

.el-card {
  margin-bottom: 1rem;
  text-align: left;

  .dangenum {
    display: flex;
    justify-content: space-between;

    .numbox {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.7rem;

      .icon {
        margin-right: 1rem;
        height: 4rem;
        width: 4rem;
        background-image: url(../../assets/safe.png);
        background-position: 0px center;
        background-size: auto 4rem;
        background-repeat: no-repeat;
        overflow: hidden;
      }

      .top {
        font-size: 2rem;
      }
    }
  }
}

:deep(.total) {
  .el-card__body {
    padding-top: 0.5rem !important;
  }
}

:deep(.card-header) {
  span {
    font-size: 0.9rem !important;
    padding-bottom: 0.5rem;
  }
}

:deep(.hometable) {
  .el-table__header {
    th {
      background-color: #8acbaf !important;
      color: white;
      text-align: center;
    }
  }
}

.demonstration {
  font-size: 0.8rem;
}

.tablesavebutton {
  position: relative;
  width: 100%;
  height: 2rem;
  .saveButton {
    position: absolute;

    right: 4.15rem;
    bottom: -0.5rem;
  }
}

.barchartbox {
  width: 90%;
}
.saveButtonbox {
  position: relative;
  height: 100%;
  .saveButton {
    position: absolute;
    right: 3.65rem;
    bottom: 2.75rem;
  }
}

@media screen and (max-width: 1540px) {
  .contain_box {
    .left {
      width: 100%;
    }

    .right {
      width: 100%;
      .saveButton {
        right: 2.5rem !important;
      }
    }
  }
  .tablesavebutton {
    .saveButton {
      position: absolute;

      right: 4.225rem;
    }
  }
}

.datebody {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 0.5rem;
  .demonstration {
    margin-right: 1rem;
  }
  .bodypicker {
    margin-right: 1rem;
  }
}
</style>
